/* eslint-disable import/no-cycle */
/* eslint-disable jsx-a11y/aria-role */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import { Form } from '@ant-design/compatible';

import '@ant-design/compatible/assets/index.css';
import { connect, routerRedux } from 'dva';
import React, { PureComponent } from 'react';

import Barra from '../../../assets/frame/Barra.png';
import BarraGray from '../../../assets/frame/Barra_gray.png';
import logo from '../../../assets/frame/logo.png';
import mainMenu from '../../../assets/frame/mainMenu.png';
import mainMenuGray from '../../../assets/frame/mainMenu_gray.png';
import noStandard from '../../../assets/frame/noStandard.png';
import noStandardGray from '../../../assets/frame/noStandard_gray.png';
import penetrate from '../../../assets/frame/penetrate.png';
import penetrateGray from '../../../assets/frame/penetrate_gary.png';
import myStyle from './style.less';

// import { menuUrl } from '../../../common/router';
import menuUrl from '../../../common/umiMenuUrl';
import { workStationKeys } from '../../../common/workStationRouter';
import PersonInfo from '../../../layouts/MainLayout/GlobalHeader/myComps/personInfo';

@connect(({ loading, userM: user }) => ({ loading, user }))
@Form.create()
export default class NavbarC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      menus: [], // 工作台数组
      imgSrc: {
        // 图片路径
        mainMenu,
        mainMenuGray,
        Barra,
        BarraGray,
        noStandard,
        noStandardGray,
        penetrate,
        penetrateGray,
      },
      selectedMenuName: undefined, // 选中的工作台名称
    };
  }

  componentDidMount() {
    // 添加主功能菜单
    this.setState({
      menus: this.props.menus,
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const path = nextProps.location?.pathname;
    let menus = [];
    menus = this.state.menus;
    // 获取当前路由 设置工作台选中与否状态 并返回给父组件当前状态
    if (JSON.stringify(nextProps.location) != JSON.stringify(this.props.location)) {
      let flag = false;
      menuUrl.map((item) => {
        // 主功能地址 非工作台地址
        if (item.url == path && !workStationKeys.includes(path)) {
          flag = path != '/';
        }
      });
      if (flag) {
        // 判断是否是主功能页面的路由 确定工作台选中跳转
        menus.map((item, index) => {
          if (index == 0) {
            if (!menus[index].selected) {
              menus[index].selected = true;
              this.props.changeStatus(menus[index].value);
            }
          } else {
            item.selected = false;
          }
        });
      } else {
        // 判断工作台路由是否相同 确定工作台选中跳转
        menus.map((item) => {
          if (item.path == path) {
            if (!item.selected) {
              item.selected = true;
              this.props.changeStatus(item.value);
            }
          } else {
            item.selected = false;
          }
        });
      }
    }
  }

  // 切换菜单
  menuClick = (obj) => {
    const {
      user: { mainActivePath },
    } = this.props;
    if (obj.selected == true) return; // 已经选中 不支持点击
    if (mainActivePath && !workStationKeys.includes(obj.path)) {
      // 定位到主功能对应的活跃地址
      console.log(mainActivePath, '*************************');
      this.props.dispatch(
        routerRedux.push({
          pathname: mainActivePath,
        }),
      ); // 地址跳转
      this.props.dispatch({
        type: 'userM/saveParams',
        payload: {
          mainActivePath: undefined,
        },
      });
      return;
    }
    this.props.dispatch(
      routerRedux.push({
        pathname: obj.path,
      }),
    ); // 地址跳转
  };

  render() {
    const { menus, imgSrc } = this.state;
    return (
      <div className={myStyle.nav}>
        <div className={myStyle.logo}>
          <img src={logo} alt='logo' />
        </div>
        <div className={myStyle.menus}>
          {menus?.map((item, index) => (
            <div
              key={index}
              onClick={() => {
                this.menuClick(item);
              }}
              style={{ height: item.selected ? '28px' : '24px' }}
            >
              <img alt='img' src={item.selected ? imgSrc[item.title] : imgSrc[`${item.title}Gray`]} />
            </div>
          ))}
        </div>
        <div className={myStyle.rightMsg}>
          {/* <SystemNotice /> */}
          <PersonInfo />
        </div>
      </div>
    );
  }
}
